import React from 'react'
import { Descriptions, Tag } from 'antd'
import CardTitle from './CardTitle'
import { color, ba } from '../../utils/json'
import none from './img/none.png'
import { SERVER } from 'configs/service'
import { session } from 'utils'
import styles from './style.module.scss'
import { Image } from '@zzwing/react-image'

export default function CarChipManage(props) {
  const { data } = props
  const record = data.chipDetailVo ? data.chipDetailVo : {}
  return (
    <div>
      <CardTitle title="基础信息"></CardTitle>
      <Descriptions>
        <Descriptions.Item label="芯片型号">
          {record.chipModel}
        </Descriptions.Item>
        <Descriptions.Item label="备案状态">
          {record.filingStatus || record.filingStatus === 0 ? (
            <Tag color={color[record.filingStatus]}>
              {ba[record.filingStatus]}
            </Tag>
          ) : (
            '--'
          )}
        </Descriptions.Item>
        <Descriptions.Item label="芯片生产企业机构代码">
          {record.organizationCode}
        </Descriptions.Item>
        <Descriptions.Item label="芯片生产企业名称">
          {record.supplierName}
        </Descriptions.Item>
        <Descriptions.Item label="联系人姓名">
          {record.contacts}
        </Descriptions.Item>
        <Descriptions.Item label="联系人电话">
          {record.contactsTel}
        </Descriptions.Item>
        <Descriptions.Item label="三位符">
          {record.chipPrefix}
        </Descriptions.Item>
      </Descriptions>
      <CardTitle title="相关附件"></CardTitle>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-around',
          marginBottom: 24,
        }}
      >
        <Imgbox
          title="厂商执照图片"
          isImg
          src={
            record.firmLicense
              ? `${SERVER}/uploadFile/base64Read?id=${record.firmLicense}&Authorization=${session.Authorization}`
              : null
          }
        ></Imgbox>
        <Imgbox
          title="iso9001资质文件"
          isImg
          src={
            record.iso9001Img
              ? `${SERVER}/uploadFile/base64Read?id=${record.iso9001Img}&Authorization=${session.Authorization}`
              : null
          }
        ></Imgbox>
        <Imgbox
          title="ios14001资质文件"
          isImg
          src={
            record.ios14001Img
              ? `${SERVER}/uploadFile/base64Read?id=${record.ios14001Img}&Authorization=${session.Authorization}`
              : null
          }
        ></Imgbox>
        <Imgbox
          title="国密资质文件"
          isImg
          src={
            record.guomiImg
              ? `${SERVER}/uploadFile/base64Read?id=${record.guomiImg}&Authorization=${session.Authorization}`
              : null
          }
        ></Imgbox>
        <Imgbox
          title="芯片授权文件"
          isImg
          src={
            record.authorizeFile
              ? `${SERVER}/uploadFile/base64Read?id=${record.authorizeFile}&Authorization=${session.Authorization}`
              : null
          }
        ></Imgbox>
        <Imgbox
          title="安全等级证书"
          isImg
          src={
            record.safetyCertificate
              ? `${SERVER}/uploadFile/base64Read?id=${record.safetyCertificate}&Authorization=${session.Authorization}`
              : null
          }
        ></Imgbox>
      </div>
      <CardTitle title="备案记录"></CardTitle>
      <div
        className={styles.successImg}
        style={{
          display:
            data?.vehicleDetailsVo?.filingStatus === 1 ? 'block' : 'none',
        }}
      ></div>
    </div>
  )
}

function Imgbox(props) {
  const { src, title, isImg } = props

  return (
    <div style={{ width: 140, height: 180 }}>
      {isImg ? (
        <Image
          src={src ? src : none}
          style={{ width: 140, height: 145, backgroundSize: '100%' }}
        />
      ) : (
        <a href={src}>点击下载</a>
      )}
      <div style={{ textAlign: 'center', lineHeight: '40px' }}>{title}</div>
    </div>
  )
}
